<template>
  <!--计划模板-->
  <div class="plantemplate bg_colorff">
    <el-row class=" p_r20 font_12 color_33">
        <el-col :span="8" class="border_right">
            <div class="templatelist broder_b">
                <div class="height25 flex bg_colorF5">
                    <div class="flex-1 p_l12">模板名称</div>
                    <div class="width88 t_center">审核状态</div>
                </div>
                <div class="line_height37 flex broder_b" v-for="(infos, index) in tplist" :key="index">
                    <div class="flex-1 border_right p_l12 pointer" @click="changetemplate(index, infos.id)">
                        <span class="inlineblock" style="width: 0.2rem"><img v-show="index == activeindex" class="checkedimg m_r5" src="@/assets/img/plan/checked.png"></span>{{infos.title}}</div>
                    <div class="width88 t_center" :class="[infos.status===0?'color_ff8':infos.status===4?'color_99':'color_33']">{{infos.status_str}}</div>
                </div>
            </div>
            <div class="font_12 p9">
                <p class="color_ff8">注：模板审核通过后可以使用</p>
                <p class="color_33 m_top5">未审核通过只能在分享号码中使用默认模板默认模板无法修改，只有新增的可以修改禁止项目</p>
                <p class="color_33 m_top5">1、违法国家法律法规</p>
                <p class="color_33 m_top5">2、出现平台名称</p>
                <p class="color_33 m_top5">3、任何网页链接</p>
                <p class="color_33 m_top5">4、带有欺诈性质的字样</p>
                <p class="color_ff8 m_top5">一经发现违规，立即做删号处理!</p>
            </div> 
        </el-col>
        <el-col :span="16">
           <div>
            <div class="tableinfo flex broder_b">
                    <div class="border_right width88 p_l12">模版ID</div>
                    <div class="flex-1">{{tbinfo.template_id}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">模版名称</div>
                    <div class="flex-1">{{tbinfo.title}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">个性签名</div>
                    <div class="flex-1">{{tbinfo.sign}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">审核状态</div>
                    <div class="flex-1">{{tbinfo.status_str}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">中</div>
                    <div class="flex-1">{{tbinfo.correct_text}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">挂</div>
                    <div class="flex-1">{{tbinfo.wrong_text}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">备注</div>
                    <div class="flex-1 minheigt">{{tbinfo.remark}}</div>
                </div>
                <div class="tableinfo  flex broder_b">
                    <div class="border_right width88 p_l12">显示</div>
                    <div class="flex-1">
                        <span class="pointer"><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >计划在上</span>
                        <span class="m_left15 pointer "><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >盈亏</span>
                        <span class="m_left15 pointer "><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >成功率</span>
                        <span class="m_left15 pointer "><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >倍数</span>
                        <span class="m_left15 pointer "><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >中将期数</span>
                        <span class="m_left15 pointer "><img class="checkimg m_r5" src="@/assets/img/plan/check.png" >中奖位置</span>
                    </div>
                </div>
            </div>
            <div class="font_12  m_top20 p_l100">
                <span class="templatebtn inlineblock t_center pointer line_height37 bg_colorE5 color_ff" @click="keepFn">新增模板</span>
                <span v-if="activeindex != 0" class="templatebtn inlineblock t_center pointer line_height37 broder_1d color_33 m_left15" @click="cansolFn">删除模板</span>        
            </div>
        </el-col>
    </el-row>

    <div class="dellayer" v-if="isWin">
        <div class="del_win_box delwh m_top200">
            <div class="del_win_box_head flex flex-align-center p_lr20">
                <div class="flex-1">删除模板</div>
                <div class="t_right"><img class="pointer" src="@/assets/img/plan/layerclose.png" alt="" @click="closeModelFun"></div>                
            </div>
            <div class="del_win_box_content height70 font_12 color_33 p_lr20">是否要删除【{{tbinfo.title}}】</div>
            <div class="t_right p_lr20 box_sizing">
                    <span class="broder_1d del_win_box_btn t_center inlineblock pointer" @click="delTemplet(tbinfo.id)">确认</span>
                    <span class="broder_1d del_win_box_btn t_center inlineblock pointer " @click="closeModelFun">取消</span>
                </div>
        </div>
    </div>

    <div class="dellayer" v-if="addwin" >
        <div class="del_win_box addwh m_top100">
            <div class="del_win_box_head flex flex-align-center p_lr20">
                <div class="flex-1">新增模板</div>
                <div class="t_right pointer"><img class="pointer" src="@/assets/img/plan/layerclose.png" alt="" @click="closeModelFun"></div>                
            </div>
            <div class="del_win_box_content font_12 color_33 p_lr20">
                <div class="flex m_top10">
                    <div class="width50 line_height37 t_right font_12 color_33">模版名称</div>
                    <div class="flex-1 m_left10"><input class="width400 line_height37 broder_1d p_l10" v-model="addinfo.tname" type="text" placeholder="请输入模板名称"  maxlength="10"/></div>
                </div>
                <div class="flex m_top10">
                    <div class="width50 line_height37 t_right font_12 color_33">个性签名</div>
                    <div class="flex-1 m_left10"><input class="width400 line_height37 broder_1d p_l10" v-model="addinfo.qianming" type="text" placeholder="请输入个性签名" maxlength="20" /></div>
                </div>
                <div class="flex m_top10">
                    <div class="width50 line_height37 t_right font_12 color_33">中</div>
                    <div class="flex-1 m_left10"><input class="width400 z line_height37 bg_colorF5 p_l10 broder_1d" disabled type="text" placeholder="中" /></div>
                </div>
                <div class="flex m_top10">
                    <div class="width50 line_height37 t_right font_12 color_33">挂</div>
                    <div class="flex-1 m_left10"><input class="width400 line_height37 bg_colorF5 p_l10 broder_1d" disabled type="text" placeholder="挂" /></div>
                </div>
                <div class="flex m_top10">
                    <div class="width50 line_height37 t_right font_12 color_33">备注</div>
                    <div class="flex-1 m_left10"><textarea class="width400 height120 p_10  broder_1d" v-model="addinfo.remark" type="text" placeholder="请输入备注内容"></textarea></div>
                </div>
                <div class="flex m_top10">
                    <div class="width50  t_right font_12 color_33">显示</div>
                    <div class="flex-1 m_left10">
                        <span class="pointer">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            计划在上</span>
                        <span class="m_left15 pointer ">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            盈亏</span>
                        <span class="m_left15 pointer ">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            成功率</span>
                        <span class="m_left15 pointer ">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            倍数</span>
                        <span class="m_left15 pointer ">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            中将期数</span>
                        <span class="m_left15 pointer ">
                            <img class="checkimg m_r5" src="@/assets/img/plan/check.png" >
                            中奖位置</span>
                    </div>
                </div>
            </div>
            <div class="t_right p_lr20 m_top20 box_sizing p_top20 p_bottom20">
                    <span class="broder_1d line_height37 widht115 t_center inlineblock pointer" @click="addTemplate">保存模板</span>
                    <span class="broder_1d line_height37 widht115 t_center inlineblock pointer m_left15" @click="closeModelFun">取消</span>
                </div>
        </div>
    </div>
  </div>

</template>

<script>
import https from '@/public/https'
    export default {
      data () {
        return {
            isWin: false,
            addwin: false,
            activeindex:'',
            addinfo: {
                tname: '',
                qianming: '',
                remark: '',
            },
            tplist: [],
            tbinfo: {}
        }
    },
    created () {
        this.getTemplatelist()  
    },
      methods: {
        getTemplatelist(){  //获取模板列表
            this.https('Manual/getObtainTemplateList',{is_use:1}).then(data => {
                this.tplist = data
                if(this.tplist){
                    this.changetemplate(0, this.tplist[0].id)
                    this.tplist[0].status_str = ''
                }
            })
        },
         changetemplate(index, id){ //切换模板，模板详情
            this.activeindex = index
            this.https('Manual/getObtainTemplateInfoById',{id: id}).then(data => {
                this.tbinfo = data
            })
        },
        addTemplate(){  //添加模板
            if(!this.addinfo.tname){
                this.$toast({
                    message: '请填写模板名称'
                })
                return
            }
            if(this.addinfo.tname.length>10){
                this.$toast({
                    message: '模板名称不能超过10个字'
                })
                return
            }
            if(!this.addinfo.qianming){
                this.$toast({
                    message: '请填写个性签名'
                })
                return
            }
            if(this.addinfo.qianming.length>20){
                this.$toast({
                    message: '个性签名不能超过20个字'
                })
                return
            }
            if(!this.addinfo.remark){
                this.$toast({
                    message: '请填写备注'
                })
                return
            }
            https.post('Manual/postAddTemplate', {title: this.addinfo.tname, sign: this.addinfo.qianming, remark: this.addinfo.remark}).then(data => {
                if(data.status == 1){
                    this.$toast({
                        message: '模板添加成功',
                    });
                    this.addwin = false
                    this.addinfo.tname = ''
                    this.addinfo.qianming = ''
                    this.addinfo.remark = ''
                    this.getTemplatelist()
                } else {
                        this.$toast({
                        message: data.message,
                    });  
                }
                
            })            
        },
         keepFn(){ //显示添加模板
            if(this.tplist.length < 5){
                this.addwin = true
            } else {
                this.$toast({
                    message: '最多新增5个模板'
                })
            }
            
        },
        delTemplet(id){  //删除模板
            this.https('manual/userDeleteTemplate', {id: id}, 'post').then(data =>{
                this.$toast({
                    message: '删除成功'
                })
                 this.isWin = false
                this.getTemplatelist()
               
            })
        },
       
        closeModelFun(){
            this.isWin = false
            this.addwin = false
            this.addinfo.tname = ''
            this.addinfo.qianming = ''
            this.addinfo.remark = ''
        },
        cansolFn() {
            this.isWin = true
        },
    },
    }
</script>

<style>
    .plantemplate .el-message-box__header{
        background: #f5f5f5 ;
    }
    .plantemplate .el-message-box__message{
        padding: 0.2rem 0;
    }
</style>
<style lang="less" scoped>
  @import url(../../assets/css/plan/planpublic.less);
  @import url(../../assets/css/artificial/artificial.less);
</style>
